{% extends "NartiBouncerBundle::layoutprimary.html.twig" %}

{% block css %}
{% endblock %}

{% block bounce %}
    <h1 id="logovalue">{{ entity.bounce }}</h1>
    <div id="logocontainer"></div>
{% endblock %}

{% block content %}

    <div id="bouncer-title">{{ entity.titolo }}</div>
    <div id="bouncer-content"></div>
        
{%endblock content%}

{% block js %}

<script type="text/javascript">
    var gText = '{{ entity.contenuto }}';

    function BouncerApp(){
			
                // canvas logo bouncer			
                var optionLogo = {
                         maxLen : 32,
                         clickCallback: function(){
                                 $("#logocontainer").effect("bounce");
                                // $("#logocontainer").show("explode");
                         },
                         font : {
                           weight  : "bold",
                           style : "italic",
                           maxsize : "42",
                           family : "sans-serif"
                        }
                 };

                var logo = new Narti.Canvas.Logo("#logovalue", "#logocontainer", optionLogo);
                logo.animate(100);


                // canvas testo bouncer
                var optionScroll = {
                       margin : 8,
                       shadow : true,	 	
                       font : {
                               weight : "bold",
                               style : "italic",
                               size : "15",
                               family : "Segoe UI, Lora, sans-serif"
                       }             
                };

                var scene = new Narti.Canvas.Scene(500, 200, $("#bouncer-content") );
                scene.addText(gText, optionScroll);
       

                // UI effects zompe			
                function bouncing(){
                         var title = $("#bouncer-title");
                         title.toggleClass('sfume');
                         title.effect("bounce", {times : 1, distance : 40}, 400, function(){title.toggleClass('sfume');} );
                }

                $("#bouncer-title").click(bouncing).css('cursor' , 'move');

        }

        $(function(){


                new BouncerApp();			
                

        });

</script>

{% endblock %}


